<template>
  <el-container class="app-container">
    <!-- 侧边导航栏 -->
    <el-aside class="app-sidebar" width="200px">
      <div class="logo-container">
        <span class="logo-text">融合号码管理平台</span>
      </div>
      <el-menu
          :default-active="activeIndex"
          class="nav-menu"
          mode="vertical"
          text-color="#333"
          active-text-color="#409EFF">
        <el-menu-item
            index="/frontpage"
            class="menu-item"
            @click="navigateTo('/frontpage')">
          <i class="el-icon-s-home"></i>
          <span class="menu-text">首页</span>
        </el-menu-item>
        <el-menu-item
            index="/num"
            class="menu-item"
            @click="navigateTo('/num')">
          <i class="el-icon-s-management"></i>
          <span class="menu-text">号码管理</span>
        </el-menu-item>
        <el-menu-item
            index="/transformation"
            class="menu-item"
            @click="navigateTo('/transformation')">
          <i class="el-icon-mobile-phone"></i>
          <span class="menu-text">号码转换</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主内容区 -->
    <el-container class="main-container">
      <!-- 顶部操作栏 -->
      <el-header class="app-header">
        <div class="user-info">
          <el-dropdown trigger="hover">
            <div class="user-actions">
              <i class="el-icon-setting"></i>
              <span class="username">{{ username }}</span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 页面内容 -->
      <el-main class="content-area">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import router from "@/router";

export default {
  data() {
    return {
      activeIndex: this.$route.path,
      username: "管理员"
    }
  },
  created() {
    this.loadUserData();
  },
  methods: {
    loadUserData() {
      const userData = localStorage.getItem("user");
      if(userData) {
        this.username = JSON.parse(userData).name;
      }
    },
    navigateTo(path) {
      if(this.$route.path !== path) {
        router.push(path);
      }
    }
  },

}
</script>

<style lang="scss" scoped>
/* 全局容器样式 */
.app-container {
  height: 100vh;
  background: #f0f2f5;

  /* 禁止文本选择 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 侧边栏样式 */
.app-sidebar {
  background: #fff !important;
  box-shadow: 2px 0 6px rgba(0,21,41,.08);
  border-right: none;

  .logo-container {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e8e8e8;

    .logo-text {
      font-size: 18px;
      font-weight: 600;
      color: #1890ff;
    }
  }

  .nav-menu {
    border-right: none;

    .menu-item {
      height: 56px;
      line-height: 56px;
      transition: all .3s;

      &:hover {
        background: #e6f7ff;
      }

      .menu-text {
        margin-left: 8px;
      }

      &.is-active {
        background: #ecf5ff;
        border-right: 3px solid #1890ff;
      }
    }
  }
}

/* 顶部操作栏 */
.app-header {
  height: 60px !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  padding: 0 24px;

  .user-info {
    cursor: pointer;

    .user-actions {
      display: flex;
      align-items: center;
      padding: 0 12px;
      transition: all .3s;

      &:hover {
        background: #f5f5f5;
      }

      .el-icon-setting {
        margin-right: 8px;
        font-size: 18px;
        color: #666;
      }

      .username {
        font-weight: 500;
        color: rgba(0,0,0,.85);
      }
    }
  }
}

/* 内容区域 */
.content-area {
  background: #fff;
  margin: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  padding: 24px;
  min-height: calc(100vh - 92px);
}

</style>